<template>
  <KView class="circle-theme-page">
    <page-header title="主题" @back-click="toBack"></page-header>
    <KView class="circle-theme-page-line"></KView>

    <KView class="circle-theme-page-content" v-if="isShow">
      <KView class="circle-theme-page-header">
        <KView class="circle-theme-page-content-title">选择主题</KView>
        <sys-theme-view :theme-list="themeList" :cur-theme="curTheme" @theme-click="themeChange"></sys-theme-view>
        <KView class="circle-theme-page-selecttheme">
          <KView>当前主题：</KView>
          <KView class="circle-theme-page-selecttheme-text">#{{curTheme.text}}#</KView>
          <KView>共{{curTheme.count}}条</KView>
        </KView>
      </KView>

      <KView class="circle-theme-page-line"></KView>
      <KView class="circle-theme-page-zone" :key="curTheme.id">
        <circle-zone-view ref="zoneView" :pagination="pagination" :circle-list="circleZoneList" :next-data-fun="setCircleZoneList"></circle-zone-view>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import PageHeader from 'common/pageHeader';
  import CircleZoneView from 'views/sysCircle/components/circleZoneView';
  import SysThemeView from './sysThemeView';

  import Pagination from 'models/pagination';
  import SysCircleApi from 'services/sysCircleApi';
  import sysCircleMixins from 'mixins/sysCircleMixins';

  export default {
    mixins: [sysCircleMixins],

    props: {
      hasBack: {
        type: Boolean,
        default: true
      }
    },

    data() {
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        themeList: [],
        curTheme: null,
        circleZoneList: [],
        pagination: null
      };
    },

    created() {
      let pagination = new Pagination();
      SystemUtil.showLoading();
      this.setThemeList().then(() => {
        return this.setCircleZoneList(true, pagination).then(() => {
          this.pagination = pagination;
          this.isShow = true;
          SystemUtil.hideLoading();
        });
      }).catch((error) => {
        SystemUtil.hideLoading();
      });

      window.onShareAppMessage = data => {
        let from = data.from;
        if (from === 'menu') {
          let href = window.location.href;
          let origin = window.location.origin;
          let url = href.substring(origin.length);
          return {
            path: url
          }
        }

        let id = data.target.id;
        let shareData = this.$refs['zoneView'].getShareData(id);
        return shareData;
      };
    },

    methods: {
      setThemeList() {
        return SysCircleApi.getThemeData().then(themeList => {
          let themeText = this.$route.query.theme;
          let themeObj = null,
            themeCount = 0;
          for (let i = 0; i < themeList.length; i++) {
            let theme = themeList[i];
            themeCount += theme.count;

            if (theme.text === themeText) {
              themeObj = theme;
            }
          }
          if (themeObj === null) {
            themeObj = themeList[0];
          }
          this.curTheme = themeObj;
          this.themeList = themeList;
          return themeList;
        });
      },

      setCircleZoneList(isInit = false, pagination = null, curTheme = null) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        if (curTheme === null) {
          curTheme = this.curTheme;
        }
        return SysCircleApi.getCircleZoneData(pagination, 0, {
          themeTag: curTheme.text
        }).then(circleZoneList => {
          curTheme.count = pagination.totalCount;
          return this.resetCircleZoneList(circleZoneList, isInit);
        });
      },

      themeChange(theme) {
        let pagination = new Pagination();
        SystemUtil.showLoading();
        return this.setCircleZoneList(true, pagination, theme).then(() => {
          this.pagination = pagination;
          this.curTheme = theme;
          SystemUtil.hideLoading();
        }).catch((error) => {
          SystemUtil.hideLoading();
        });
      },

      resetCircleZoneLogById(logData) {
        let circle = this.getCircleZoneObjById(logData.spaceId);
        if (circle !== null) {
          circle.resetCircleLogStatusData(logData);
        }
      },

      resetCircleZoneLog(spaceId) {
        let circle = this.getCircleZoneObjById(spaceId);
        if (circle !== null) {
          this.$refs['zoneView'].resetCircleZoneLog(circle);
        }
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }

        if (this.hasBack) {
          wx.navigateBack();
        } else {
          this.$emit('to-page', '/home');
        }
      },

      getShareData(id) {
        return this.$refs['zoneView'].getShareData(id);
      }
    },

    components: {
      PageHeader,
      SysThemeView,
      CircleZoneView
    }
  };

</script>

<style lang="scss">
  .circle-theme-page {
    height: 100%;
    overflow: auto;

    .page-header {
      margin-bottom: formatPx(20);
    }

    .circle-theme-page-line {
      height: 1px;
      background: #DADADA;
    }

    .circle-theme-page-content-title {
      border-left: formatPx(10) solid #59C264;
      font-size: formatPx(36);
      padding-left: formatPx(15);
      line-height: formatPx(40);
      height: formatPx(40);
    }

    .circle-theme-page-content {
      margin-top: formatPx(30);
      padding: 0 formatPx(30);
      height: calc(100% - #{formatPx(120)});
      overflow: auto;

      .circle-theme-page-header {
        margin-bottom: formatPx(30);

        .sys-theme-view {
          margin-top: formatPx(30);
        }

        .circle-theme-page-selecttheme {
          margin-top: formatPx(10);
          display: flex;
          font-size: formatPx(26);
          color: #565961;
        }

        .circle-theme-page-selecttheme-text {
          flex: 1;
          margin-right: formatPx(8);
          color: #fc3d3d;
        }
      }

      .circle-theme-page-zone {
        margin-top: formatPx(40);
        margin-left: formatPx(-30);
        margin-right: formatPx(-30);
        max-height: calc(100% - #{formatPx(120)});
        overflow: auto;
      }
    }
  }

</style>
